<template>
  <div class="login">
    <div class="login-wrap">
      <el-form
        class="login-form"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        label-width="100px"
      >
        <div class="img-container">
          <img src="../assets/img/login2.jpg" />
        </div>
        <h2 class="title">自律使我自由</h2>
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            prefix-icon="el-icon-user-solid"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="identify">
          <el-input
            v-model="ruleForm.identify"
            placeholder="仅支持'ad'和'mem'两种身份"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="warning"
            @click="handleLogin"
            >登录</el-button
          >
          <el-link type="primary" @click="handleUpdatePassword">忘记密码？</el-link>
         
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkIdentify = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份不能为空"));
      } else if (value !== 'ad' && value !== 'mem') {
        return callback(new Error("身份必须是'ad'或'mem'"));
      } else {
        callback();
      }
    };
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
        identify: "",
      },
      rules: {
        username: [{ validator: validateUserName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        identify: [{ validator: checkIdentify, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleUpdatePassword: function () {
      this.$router.push({ path: "/resetpassword" });
    },
   
  handleLogin() {
  this.$refs.ruleForm.validate((valid) => {
    if (valid) {
      const { username, password, identify } = this.ruleForm;
      this.$http.post('/users/login', { username, password, identify })
     .then(response => {
          if (response.data) {
            this.$message.success("登录成功");
            // 存储用户信息到localStorage
            localStorage.setItem('user', JSON.stringify(response.data));
            // 存储当前登录的用户名到localStorage
                localStorage.setItem('currentUserName', username);
            // 新增代码，存储身份信息到localStorage
            localStorage.setItem('userIdentity', identify);
            this.$router.push('/home');
          } else {
            this.$message.error(response.data || "登录失败");
          }
        })
     .catch(error => {
          console.error("登录失败:", error);
          this.$message.error("登录失败，请检查您的账号与密码是否正确或存在");
        });
    } else {
      this.$message.error("请正确填写登录信息");
    }
  });
}
  },
  mounted() {
    console.log("组件已经挂载");
  },
};
</script>

<style scoped>
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-wrap .login-form {
  width: 350px;
  height: auto;
  padding: 30px;
  border-radius: 5px;
}
.login-wrap .login-form .login-button {
  width: 100%;
}

.login {
  background-image: url(../assets/img/login.jpg) !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  text-align: center;
  color: #000;
  font-size: 40px;
  margin-bottom: 10px;
  font-family: monospace;
}

.img-container {
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-left: 125px;
  width: 120px;
  height: 120px;
}

.img-container img {
  width: 100%;
  max-width: 100px;
  height: auto;
}

.custom-input .el-input__prefix .el-icon-user-solid {
  color: rgb(245, 132, 13) !important;
}

.custom-input .el-input__prefix .el-icon-lock {
  color: rgb(245, 132, 13) !important;
}

.login-form >>> .el-form-item__label {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  font-family: Courier New;
}
</style>